<template>
  <a-layout class="layout">
    <a-layout-content style="padding: 0 50px; width: 100%; min-height: calc(100vh - 64px); overflow-y: auto;">
      <!-- 表格 -->
      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :rowKey="record => record.id"
        :pagination="false"
      >
        <!-- 自定义操作列 -->
        <template #operation="{ record }">
          <span>
            <a @click="showEditModal(record)">编辑</a>
            <a-divider type="vertical" />
            <a-popconfirm
              title="确定删除吗？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="() => handleDelete(record)"
            >
              <a style="color: red">删除</a>
            </a-popconfirm>
          </span>
        </template>
      </a-table>

      <!-- 编辑学院的模态框 -->
      <a-modal
        v-model:open="state.editModalOpen"
        title="编辑院系专业"
        @ok="handleEditOk"
        ok-text="确定"
        cancel-text="取消"
      >
        <a-form
          :model="state.editFormState"
          name="editForm"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          ref="editFormRef"
        >
          <a-form-item
            label="标题"
            name="title"
            :rules="[{ required: true, message: '请输入标题!' }]"
          >
            <a-input v-model:value="state.editFormState.title" />
          </a-form-item>
          <a-form-item
            label="文章类型"
            name="category"
            :rules="[{ required: true, message: '请选择文章类型!' }]"
          >
            <a-input v-model:value="state.editFormState.category" />
          </a-form-item>
        </a-form>
      </a-modal>

      <!-- Quill 富文本编辑器 -->
      <div class="editor-container">
        <h3>高校动态</h3>
        <a-form layout="vertical">
          <a-form-item label="文章标题">
            <a-input v-model:value="editorState.title" placeholder="请输入文章标题" />
          </a-form-item>
          <a-form-item label="文章类型">
            <a-select v-model:value="editorState.category" placeholder="请选择文章类型">
              <a-select-option v-for="category in categories" :key="category.id" :value="category.category">
                {{ category.category }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="文章内容">
            <quill-editor v-model="editorState.content" :options="editorOptions" />
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handlePublish">发表</a-button>
            <a-button style="margin-left: 8px" @click="handlePreview">预览</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-layout-content>
    
    <a-layout-footer style="text-align: center;"></a-layout-footer>
  </a-layout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const columns = [
  { title: '发布时间', dataIndex: 'createdTime' },
  { title: '题目', dataIndex: 'title' },
  { title: '文章类型', dataIndex: 'category' },
  {
    title: '操作',
    key: 'operation',
    slots: { customRender: 'operation' }
  },
];

const data = ref([
  {
    createdBy: 'admin',
    createdTime: '2022-08-15 16:38:33',
    updatedBy: 'admin',
    updatedTime: '2024-06-06 15:11:15',
    id: 5,
    title: '河北师范大学通知',
    category: '师大通知',
    content: '<p>这是通知</p>',
    top: 'Y',
    type: 'colleges',
    schoolNum: null
  },
  {
    createdBy: 'admin',
    createdTime: '2022-08-15 17:14:45',
    updatedBy: 'admin',
    updatedTime: '2024-06-06 15:11:12',
    id: 9,
    title: '河北师范大学软件学院',
    category: '学院规范',
    content: '<p>类型</p>',
    top: null,
    type: 'colleges',
    schoolNum: null
  },
  {
    createdBy: 'admin',
    createdTime: '2022-08-10 11:54:17',
    updatedBy: 'admin',
    updatedTime: '2022-08-10 11:54:17',
    id: 1,
    title: '河北师范大学软件学院工作简报',
    category: '工作简报',
    content: '<p>这里是正文</p><p><b>加粗</b></p><p><i>斜体</i></p>',
    top: null,
    type: 'colleges',
    schoolNum: null
  }
]);

const state = reactive({
  selectedRowKeys: [],
  editModalOpen: false,
  editFormState: {
    title: '',
    category: ''
  },
});

const dataSource = computed(() => {
  return data.value.map(item => ({
    ...item,
    key: item.id,
  }));
});

const showEditModal = (record) => {
  state.editFormState = { ...record };
  state.editModalOpen = true;
};

const handleEditOk = () => {
  const index = data.value.findIndex(item => item.id === state.editFormState.id);
  if (index !== -1) {
    data.value[index].title = state.editFormState.title;
    data.value[index].category = state.editFormState.category;
  }
  state.editModalOpen = false;
};

const handleDelete = (record) => {
  data.value = data.value.filter(item => item.id !== record.id);
};

const categories = ref([
  {
      "createdBy": "admin",
      "createdTime": "2022-08-15 17:13:38",
      "updatedBy": "admin",
      "updatedTime": "2022-08-15 17:54:00",
      "id": 37,
      "category": "学院规范"
    },
    {
      "createdBy": "admin",
      "createdTime": "2022-08-15 17:13:48",
      "updatedBy": "admin",
      "updatedTime": "2022-08-15 17:13:48",
      "id": 38,
      "category": "工作进度"
    },
    {
      "createdBy": "admin",
      "createdTime": "2022-08-15 17:15:16",
      "updatedBy": "admin",
      "updatedTime": "2022-08-15 17:15:16",
      "id": 40,
      "category": "党团活动"
    },
    {
      "createdBy": "admin",
      "createdTime": "2022-08-15 17:15:22",
      "updatedBy": "admin",
      "updatedTime": "2022-08-15 17:15:22",
      "id": 41,
      "category": "团旗飘扬"
    },
    {
      "createdBy": "admin",
      "createdTime": "2022-08-16 10:47:57",
      "updatedBy": "admin",
      "updatedTime": "2022-08-16 14:45:17",
      "id": 46,
      "category": "党旗飘飘"
    }
]);

// 富文本编辑器状态
const editorState = reactive({
  title: '',
  category: '',
  content: ''
});

// Quill 编辑器选项
const editorOptions = {
  theme: 'snow'
};

const handlePublish = () => {
  console.log('文章发表:', editorState);
};

const handlePreview = () => {
  console.log('文章预览:', editorState);
};
</script>

<style scoped>
.layout {
  min-height: 100vh;
  overflow-y: auto; /* 添加垂直滚动条 */
}

.editor-container {
  margin-top: 50px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.editor-container h3 {
  text-align: center;
  margin-bottom: 20px;
}
</style>





